<style lang="scss" scoped>
	.btns {
		// padding-left: 25rpx;
		// padding-right: 25rpx;
		width:100%;
		padding: .7rem;
		.btn2 {
			// width: 303rpx;
			// height: 75rpx;
			// border-radius: 100rpx;
			font-size: 26rpx;

		}

		// .btn1 {
		// 	border: 2rpx solid #000000;
		// }

		.btn3 {
			color: #38BEEF;
		}
	}
</style>
<!-- 选择器 -->
<template>
	<u-popup :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="popupValue" length="auto"
		:safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="zIndex">
		<view class="btns between-flex m-top30 paddingBottom t-flex between" @touchmove.stop.prevent="">
			<view class=" btn2 c333 " @click="getResult('cancel')">取消</view>
			<view class=" btn2 cfff btn3 " @click.stop="getResult('confirm')">确定</view>
		</view>
		<view class="u-datetime-picker p-bottom20">
			<view class="u-picker-header" @touchmove.stop.prevent="">
				<view class="u-btn-picker u-btn-picker--primary" hover-class="u-opacity" :hover-stay-time="150"
					@touchmove.stop="" style="opacity: 0;">
<!-- 					{{ confirmText }} -->
xanifbkbd
				</view>
			</view>
			<view class="u-picker-body">
				<picker-view indicator-style="background:#E0F4FF;z-index:0;" @change="change" class="u-picker-view"
					:value="valueArr" @pickstart="pickstart" @pickend="pickend">
					<picker-view-column v-if="!reset && params.province">
						<view class="u-column-item" v-for="(item, index) in provinces" :key="index">
							<view class="u-line-1">{{ item.name }}</view>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && params.city">
						<view class="u-column-item" v-for="(item, index) in citys" :key="index">
							<view class="u-line-1">{{ item.name }}</view>
						</view>
					</picker-view-column>
					<picker-view-column v-if="!reset && params.area">
						<view class="u-column-item" v-for="(item, index) in areas" :key="index">
							<view class="u-line-1">{{ item.name }}</view>
						</view>
					</picker-view-column>
				</picker-view>

			</view>
		</view>
	</u-popup>
</template>


<script setup lang="ts">
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	const emit = defineEmits(['update:modelValue', 'confirm']);
	const reset = ref(false)
	const popupValue = computed(() => {
		return props.modelValue
	})
	const valueArr = ref([0, 0, 0])
	const provinces = ref([])
	const citys = ref([])
	const areas = ref([])
	const province = ref(0)
	const city = ref(0)
	const area = ref(0)
	const getResult = (event) => {
		if (moving.value) {
			return
		}
		if (event == 'cancel') {
			emit('update:modelValue', false)
		} else {
			let obj = {
				province: provinces.value[province.value],
				city: citys.value[city.value],
				area: areas.value[area.value]

			}
			emit('confirm', obj)
			emit('update:modelValue', false)
		}
	}
	const change = async (e) => {
		console.log(e)
		let value = e.detail.value
		valueArr.value = value
		if (value[0] != province.value) {
			province.value = value[0]
			citys.value = await getCity()
			city.value = 0
			areas.value = await getArea()
			area.value = 0
			valueArr.value[1] = 0
			valueArr.value[2] = 0
			return
		}
		if (value[1] != city.value) {
			city.value = value[1]

			areas.value = await getArea()
			area.value = 0
			valueArr.value[2] = 0
			return
		}
		if (value[2] != area.value) {
			area.value = value[2]
		}

	}
	const getProvince = () => {
		return new Promise((resolve, reject) => {
			uni.$http.get('/api/address/area', {
				pid: 0
			}).then(res => {
				let list = res.data
				list.forEach(item => {
					item.name = item.label
				})
				resolve(list)

			})
		})
	}
	const getCity = () => {
		return new Promise((resolve, reject) => {
			let id = provinces.value[province.value].id
			uni.$http.get('/api/address/area', {
				pid: id
			}).then(res => {
				let list = res.data
				list.forEach(item => {
					item.name = item.label
				})
				resolve(list)

			})
		})
	}
	const getArea = () => {
		return new Promise((resolve, reject) => {
			let id = citys.value[city.value].id
			uni.$http.get('/api/address/area', {
				pid: id
			}).then(res => {
				let list = res.data
				list.forEach(item => {
					item.name = item.label
				})
				resolve(list)

			})
		})
	}
	const init = async () => {
		provinces.value = await getProvince()
		citys.value = await getCity()
		areas.value = await getArea()

	}
	init()
	const moving = ref(false)

	const pickstart = () => {
		moving.value = true
	}
	const pickend = () => {
		moving.value = false
	}

	const close = () => {
		emit('update:modelValue', false)
	}
	const props = defineProps({
		// 通过双向绑定控制组件的弹出与收起
		value: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: Boolean,
			default: false
		},
		// picker中需要显示的参数
		params: {
			type: Object,
			default() {
				return {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					province: true,
					city: true,
					area: true,
					timestamp: true
				};
			}
		},
		// 当mode=selector或者mode=multiSelector时，提供的数组
		range: {
			type: Array,
			default() {
				return [];
			}
		},
		// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
		defaultSelector: {
			type: Array,
			default() {
				return [0];
			}
		},
		// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
		rangeKey: {
			type: String,
			default: ""
		},
		// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
		mode: {
			type: String,
			default: "time"
		},
		// 年份开始时间
		startYear: {
			type: [String, Number],
			default: 1950
		},
		// 年份结束时间
		endYear: {
			type: [String, Number],
			default: 2050
		},
		// "取消"按钮的颜色
		cancelColor: {
			type: String,
			default: "#606266"
		},
		// "确定"按钮的颜色
		confirmColor: {
			type: String,
			default: "#2979ff"
		},
		// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
		defaultTime: {
			type: String,
			default: ""
		},
		// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
		defaultRegion: {
			type: Array,
			default() {
				return [];
			}
		},
		// 时间模式时，是否显示后面的年月日中文提示
		showTimeTag: {
			type: Boolean,
			default: true
		},
		// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
		areaCode: {
			type: Array,
			default() {
				return [];
			}
		},
		safeAreaInsetBottom: {
			type: Boolean,
			default: false
		},
		// 是否允许通过点击遮罩关闭Picker
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		// 弹出的z-index值
		zIndex: {
			type: [String, Number],
			default: 0
		},
		// 顶部标题
		title: {
			type: String,
			default: ""
		},
		// 取消按钮的文字
		cancelText: {
			type: String,
			default: "取消"
		},
		// 确认按钮的文字
		confirmText: {
			type: String,
			default: "确认"
		},
		// 遮罩的模糊度
		blur: {
			type: [String, Number],
			default: 0
		}

	});
</script>
<style lang="scss" scoped>
	.u-datetime-picker {
		position: relative;
		z-index: 999;
	}

	.u-picker-view {
		height: 100%;
		box-sizing: border-box;
	}

	.u-picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 30rpx;
		background: #fff;
		position: relative;
	}

	.u-picker-header::after {
		content: "";
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.u-picker__title {
		color: $u-content-color;
	}

	.u-picker-body {
		width: 100%;
		height: 340rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.u-column-item {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: $u-main-color;
		padding: 8rpx;
	}

	.u-text {
		font-size: 24rpx;
		padding-left: 8rpx;
	}

	.u-btn-picker {
		padding: 16rpx;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
	}

	.u-opacity {
		opacity: 0.5;
	}

	.u-btn-picker--primary {
		color: $u-type-primary;
	}

	.u-btn-picker--tips {
		color: $u-tips-color;
	}
</style>